<template>
  <view class="share">
    <image
      class="img"
      src="https://ryjdshop.oss-cn-beijing.aliyuncs.com/images/share.png"
      mode="widthFix"
    ></image>
    <view class="cont">
      <view class="cont-1">
        <view class="cont-2">
          <view class="title">每邀请一个新用户，最高可赚</view>
          <view class="price color"> 30 <text class="color">元</text> </view>
        </view>
      </view>
    </view>
    <view class="flex content">
      <image
        @click="onShare"
        src="../../../static/images/share-btn.png"
        mode="widthFix"
      ></image>
    </view>
    <view class="box">
      <view class="flex h1">如何赚钱</view>
      <view class="box-1 flex">
        <view
          class="views flex align-items-start"
          v-for="(item, index) in 3"
          :key="index"
        >
          <view class="flex flex-direction-column">
            <image
              :src="`../../../static/images/${46 + index}@2x.png`"
              mode=""
            ></image>
            <text>{{
              index === 0 ? "分享" : index === 1 ? "新人下单" : "第二单"
            }}</text>
            <text>{{
              index === 0
                ? "邀请好友"
                : index === 1
                ? "最高赚20元"
                : "最高赚10元"
            }}</text>
          </view>
          <view class="i flex" v-if="index !== 2">
            <u-icon
              name="play-right-fill"
              color="rgba(255, 227, 131, 1)"
            ></u-icon>
          </view>
        </view>
      </view>
    </view>

    <view class="box">
      <view class="flex h1">我的收益</view>
      <view class="box-2 flex">
        <view class="views flex flex-direction-column margin_24">
          <view class="price color">
            {{ money }}<text class="color">元</text>
          </view>
          <view class="btn flex" @click="topath">
            累积收入
            <u-icon
              name="play-right-fill"
              size="14"
              color="rgba(2, 87, 45, 1)"
            ></u-icon>
          </view>
        </view>
        <view class="views flex flex-direction-column">
          <view class="price color">
            {{ user }} <text class="color">人</text>
          </view>
          <view class="btn flex">
            我的好友
            <u-icon
              class="icon"
              name="play-right-fill"
              size="14"
              color="rgba(2, 87, 45, 1)"
            ></u-icon>
          </view>
        </view>
      </view>
      <view class="box-2">
        <view class="list">
          <view class="h2">邀请记录</view>
          <view
            class="view flex"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <image :src="item.avatar" mode=""></image>
            <view class="right">
              <view>用户：{{ item.nickname }}</view>
              <view
                >TEL：{{
                  item.mobile
                    ? item.mobile.slice(0, 3) + "****" + item.mobile.slice(7)
                    : "****"
                }}
              </view>
            </view>
          </view>

          <view class="no flex"> 暂无数据 </view>
        </view>
      </view>
    </view>

    <!-- <H5Share ref="share"></H5Share> -->
  </view>
</template>

<script>
// import appShare, {
//   closeShare,
// } from "@/uni_modules/zhouWei-APPshare/js_sdk/appShare";
// #ifndef APP-PLUS
import wxjs from "@/plugins/ws.js";
// #endif
// import H5Share from '@/components/h5-share.vue'
export default {
  data() {
    return {
      money: 0,
      user: 0,
      page: 1,
      total: null,
      dataList: [],
      id: "",
      isWx: false,
    };
  },
  onLoad() {
    let userinfo = uni.getStorageSync("userInfo");
    this.init();
    this.getList();
    // #ifdef H5
    let ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      this.isWx = true;
    }
    this.$http
      .post("api/wechat/getSignpPackage", {
        url: window.location.href.split("#")[0],
      })
      .then((res) => {
        if (!this.isWx) {
          return;
        }
        console.log(wxjs);
        wxjs.config({
          debug: false,
          // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.appId,
          // 必填，公众号的唯一标识
          timestamp: res.timestamp,
          // 必填，生成签名的时间戳
          nonceStr: res.nonceStr,
          // 必填，生成签名的随机串
          signature: res.signature,
          // 必填，签名
          jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"],
        });
      });
    return;
    // #endif
  },
  onReachBottom() {
    if (this.total === this.dataList.length) {
      return;
    }
    this.page++;
    this.getList();
  },
  components: {
    // H5Share
  },
  methods: {
    topath() {
      uni.navigateTo({
        url: "/bundle/pages/commission/commission",
      });
    },
    onShare() {
      uni.navigateTo({
        url: "/bundle/pages/h5-share/h5-share",
      });
      // this.$refs.share.show_poster = true;
    },
    init() {
      // 收益
      this.$http.post("api/share/index").then((res) => {
        for (let i in res) {
          this[i] = res[i];
        }
      });
      // 获取当前用户的id
      this.$http.post("api/user/userInfo").then((res) => {
        let { id } = res;
        console.log(res);
        this.id = id;
      });
      // 获取微信自定义图标等
      this.$http.post("api/wechat/wxShare").then((res) => {
        console.log(res);
        for (let i in res) {
          this[i] = res[i];
        }
      });
    },
    // 邀请记录
    getList() {
      this.$http
        .post("api/share/team", {
          page: this.page,
        })
        .then((res) => {
          console.log(res);
          let { list, total } = res;
          this.total = total;
          this.dataList.push(...list);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.share {
  min-height: 100vh;
  background-color: rgba(24, 181, 103, 1);
  display: flex;
  flex-direction: column;

  .flex {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .align-items-start {
    align-items: flex-start;
  }

  .justify-content-start {
    justify-content: flex-start;
  }

  .flex-direction-column {
    flex-direction: column;
  }

  .color {
    background: linear-gradient(-31deg, #ffdd68 0%, #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  .img {
    width: 100%;
  }

  .cont {
    margin: -40rpx 40rpx 0;
    height: 395rpx;
    padding-bottom: 112rpx;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 20rpx 20rpx 0 0;
    position: relative;
    z-index: 2;

    &-1 {
      height: 435rpx;
      margin: -40rpx 50rpx 0;
      background-color: red;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 20rpx 20rpx 0 0;
    }

    &-2 {
      height: 395rpx;
      background-color: rgba(0, 0, 0, 0.3);
      margin: 0 35rpx;
      transform: translateY(40rpx);
      border-radius: 20rpx 20rpx 0 0;
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        color: rgba(255, 221, 123, 1);
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 31rpx 0 34rpx 0;
      }

      .price {
        font-size: 150rpx;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        font-weight: bold;

        text {
          font-size: 50rpx;
          transform: translateY(-36rpx);
        }
      }

      .p {
        width: 378rpx;
        height: 51rpx;
        border: 1rpx solid rgba(255, 180, 79, 1);
        border-radius: 51rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 227, 131, 1);
        font-size: 24rpx;
      }
    }
  }

  .content {
    height: 202rpx;
    background-color: rgba(0, 0, 0, 0.2);
    margin: 0 40rpx 20rpx;
    border-radius: 0 0 20rpx 20rpx;

    image {
      width: 459rpx;
    }
  }

  .box {
    margin: 20rpx 40rpx;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 47rpx 0 36rpx 0;
    border-radius: 20rpx;

    .h1 {
      color: rgba(255, 227, 131, 1);
      font-size: 36rpx;
      position: relative;
      margin-bottom: 70rpx;
    }

    .h1::after {
      content: "";
      width: 50rpx;
      height: 2rpx;
      background-color: rgba(255, 227, 131, 1);
      transform: translateX(20rpx);
    }

    .h1::before {
      content: "";
      width: 50rpx;
      height: 2rpx;
      background-color: rgba(255, 227, 131, 1);
      transform: translateX(-20rpx);
    }

    &-1 {
      .views {
        color: rgba(255, 187, 87, 1);
        font-size: 26rpx;

        image {
          width: 115rpx;
          height: 115rpx;
          margin-bottom: 20rpx;
        }
      }

      .i {
        margin: 0 40rpx;
        height: 115rpx;
      }
    }

    &-2 {
      margin: 0 34rpx;

      .views {
        flex: 1;
        height: 180rpx;
        background-color: rgba(0, 78, 25, 0.9);
        border-radius: 24rpx;

        .price {
          font-size: 60rpx;
          font-weight: bold;

          text {
            font-size: 26rpx;
          }
        }

        .btn {
          width: 192rpx;
          height: 56rpx;
          background: linear-gradient(-55deg, #ffbd59 0%, #ffdf7e 100%);
          border-radius: 56rpx;
          color: rgba(0, 78, 25, 1);
          font-size: 31rpx;

          .icon {
            margin-left: 18rpx;
          }
        }
      }

      .list {
        margin-top: 24rpx;
        background-color: rgba(0, 78, 25, 0.9);
        border-radius: 24rpx;
        padding: 40rpx;

        .h2 {
          color: rgba(255, 227, 131, 1);
          font-size: 32rpx;
        }

        .no {
          height: 80rpx;
          color: #c0c0c0;
          font-size: 28rpx;
        }

        .view {
          margin-top: 44rpx;

          image {
            width: 96rpx;
            height: 96rpx;
            border-radius: 96rpx;
            margin-right: 26rpx;
          }

          .right {
            flex: 1;
            color: rgba(255, 227, 131, 1);
            font-size: 28rpx;

            text:last-of-type {
              font-size: 24rpx;
            }
          }
        }
      }

      .margin_24 {
        margin-right: 24rpx;
      }
    }
  }
}
</style>
